<template>
    <div id="chart">
        <div id="select">
            <!-- <div style="margin-bottom: 5px"/>-->
            <div  style="margin-bottom:5px;height:40px">
                <div id="example-5">
                    <select v-model="startselected" style="height: 30px">
                        <option disabled value="">起始日期</option>
                        <option>2021-11-09 00:00:00</option>
                        <option>2021-11-10 00:00:00</option>
                        <option>2021-11-11 00:00:00</option>
                        <option>2021-11-12 00:00:00</option>
                        <option>2021-11-13 00:00:00</option>
                        <option>2021-11-14 00:00:00</option>
                        <option>2021-11-15 00:00:00</option>
                        <option>2021-11-16 00:00:00</option>
                        <option>2021-11-17 00:00:00</option>
                        <option>2021-11-18 00:00:00</option>
                        <option>2021-11-19 00:00:00</option>
                        <option>2021-11-20 00:00:00</option>
                        <option>2021-11-21 00:00:00</option>
                        <option>2021-11-22 00:00:00</option>
                    </select>
                    <select v-model="endselected" style="height: 30px">
                        <option disabled value="">结束日期</option>
                        <option>2021-11-11 00:00:00</option>
                        <option>2021-11-12 00:00:00</option>
                        <option>2021-11-13 00:00:00</option>
                        <option>2021-11-14 00:00:00</option>
                        <option>2021-11-15 00:00:00</option>
                        <option>2021-11-16 00:00:00</option>
                        <option>2021-11-17 00:00:00</option>
                        <option>2021-11-18 00:00:00</option>
                        <option>2021-11-19 00:00:00</option>
                        <option>2021-11-20 00:00:00</option>
                        <option>2021-11-21 00:00:00</option>
                        <option>2021-11-22 00:00:00</option>
                        <option>2021-11-23 00:00:00</option>
                    </select>
                    <button v-on:click="getData" style="margin-left: 5px; height: 30px">确定</button>
                    <button v-on:click="update" style="margin-left: 5px; height: 30px">从新选择</button>
                </div>

            </div>
        </div>
        <div id="main"/>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                Data:[],
                DataWD:[],
                DataSD:[],
                dataSD:[],
                DataLight:[],
                startselected:'',
                endselected:'',
            }
        },
        mounted() {
        },
        methods: {
            getData: function () {
                //基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('main'),'dark',);
                const axios = require('axios');
                axios.get('http://47.113.217.47:9095/SmartAG/view/viewTodayLight', {
                    params: {
                        date1: this.startselected,
                        date2: this.endselected,
                    }
                }).then(result=>
                    {
                        /*console.log(result.data);*/
                        // for (let i = 0; i <= result.data.length; i++) {
                        /*for (let i = 0; i <= 9; i++) {
                            let wd = result.data[i].temperatureData;
                            let gq = result.data[i].lightData;
                            let sd = result.data[i].humidityData;
                            let data = result.data[i].date;
                            this.DataWD.push({wd
                            });
                            console.log(this.DataWD);
                            this.DataSD.push({sd
                            });
                            this.DataLight.push({gq
                            });
                            this.Data.push({data
                            });
                        }*/
                        //时间
                        const DateTime = (function () {
                            let res = [];
                           /* let len = 11;*/
                            for (let i = 0;i <= result.data.length-1;i++) {
                                console.log(result.data[i].date)
                                res.push(renderTime(result.data[i].date));
                                console.log(renderTime(result.data[i].date))
                            }
                            return res;
                        })();
                        console.log(DateTime[0])

                        function renderTime(date) {
                            var dateee = new Date(date).toJSON();
                            return new Date(+new Date(dateee) + 0 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
                        }

                        //初始数据，每次随机生成数据（光度）
                        const DataGQ = (function () {
                            let res = [];
                            /* let len = 9;*/
                            /*while (len--) {
                                console.log(result.data[1].id)
                                res.push(result.data[len].humidity);
                                console.log(result.data[len].humidity)
                            }*/
                            for (let i = 0; i <= result.data.length-1; i++) {
                                res.push(result.data[i].light);
                                console.log(result.data[i].light)
                            }
                            return res;
                        })();

                        /*  //温度
                          const DataWD = (function () {
                              let res = [];
                              let len = 10;
                              while (len--) {
                                  res.push(result.data[len].temperatureData);
                              }
                              return res;
                          })();
                          console.log(DataWD)

                          //光度
                          const DataLight = (function () {
                              let res = [];
                              let len = 10;
                              while (len--) {
                                  res.push(result.data[len].lightData);
                              }
                              return res;
                          })();
                          console.log(DataWD)*/



                        let option = {
                            /*标题*/
                            title: {
                                top:'5%',
                                right: 'center',
                                text: '光强变化图',
                                textStyle:{
                                    color: '#00CBA7'
                                }
                            },

                            //图表大小、
                            grid:{
                                top:'20%',
                                left:100,
                                right:'15%',
                                button:'10%',
                            },

                            //提示框
                            tooltip: {
                                trigger: 'axis',
                                //坐标轴指示器配置项
                                axisPointer:{
                                    lineStyle: {
                                        color: '00FF00'
                                    }
                                }
                            },
                            //图例组件
                            legend:{
                                top:20,
                                icon: 'rect',
                                itemHeight:5,
                                itemWidth:14,
                                itemGap: 13,
                                data: ['温度','湿度'],
                                right: '4%',
                                textStyle: {
                                    fontSize: 12,
                                    color: '#F1F1F3'
                                }
                            },
                            //缩放区域
                            dataZoom: {
                                show: false,
                                start: 0,
                                end: 100
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    data: DateTime,
                                },
                            ],

                            yAxis: [
                                /*  {
                                      type: 'value',
                                      scale: true,
                                      name: '温度（/℃）',
                                      max: 40,
                                      min: 0,
                                      boundaryGap: [0.2, 0.2]
                                  },*/
                                {
                                    type: 'value',
                                    scale: true,
                                    name: '光强',
                                    max: 8000,
                                    min: 0,
                                    boundaryGap: [0.2, 0.2]
                                },
                            ],
                            series: [
                                /* {
                                    name: '温度',
                                    data: DataWD,
                                    type: 'line',
                                    barWidth:10,
                                },*/
                                {
                                    name: '光强',
                                    type: 'bar',
                                    barWidth:10,
                                    /*xAxisIndex:1,*/
                                    /*yAxisIndex:1,//使用y轴右边的值*/
                                    /* data: this.dataSD,*/
                                    data:DataGQ,
                                },/*{
                                name: '光强',
                                type: 'line',
                                barWidth:10,
                                yAxisIndex:1,
                                data: DataLight,
                            },*/
                            ]
                        };
                        // 绘制图表
                        myChart.setOption(option);
                    }
                );
            },/////getdata结束

            update: function () {
                // 在需要用到的事件中调用this.reload()；函数即可
                this.$router.go(0)
            }
        },
    }
</script>

<style scoped>
  #chart{
    float: left;
    width: 1450px;
    /* width: 100%;*/
    height: 700px;
  }
  #main{
    float: left;
    width: 1450px;
    /* width: 100%;*/
    height: 650px;
  }
    #select{
        width: 1450px;
        height: 50px;
        background-color: #447fbc;
        color: aliceblue;
    }
</style>

